<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="/admin/_layouts/default">
<head>
    <title>群发邮件</title>
</head>
<body>
<div layout:fragment="content">
    <!-- 内容区域 -->
    <section class="content">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-xs-12 i-navbar">
                <a class="btn btn-primary" th:href="@{/admin/message/mail/index.html}" data-pjax><i
                        class="fa fa-arrow-left"></i> 返回
                </a>
            </div>
            <div class="col-xs-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <header class="tool-bar">
                            <h3 class="pull-left">群发</h3>
                        </header>
                    </div>
                    <div class="box-body">
                        <form id="js-form" th:action="@{/admin/message/mail/send-group}"
                              method="POST"
                              class="stepy">
                            <!--/*@thymesVar id="template" type="in.hocg.web.modules.system.domain.MailTemplate"*/-->
                            <input type="hidden" name="id" th:value="${template.id}">
                            <fieldset title="第一步">
                                <legend>设置参数</legend>
                                <div class="form-group">
                                    <label for="defSubject">标题</label>
                                    <input class="form-control" id="defSubject" name="defSubject"
                                           th:value="${template.defSubject}"
                                           placeholder="请输入标题">
                                </div>
                                <div class="form-group">
                                    <label for="params">参数</label>
                                    <textarea class="form-control" id="params" name="params"
                                              th:text="${template.getParamString()}"
                                              placeholder="请输入参数"></textarea>
                                </div>
                                <div class="form-group">
                                    <label>图片及CID</label>
                                    <div th:include="/admin/_widgets/upload-box::upload-box"
                                         th:with="iFiles=${template?.images?.values()},id='UploadImages',var=imagesId,height=3"></div>
                                    <p class="help-block">上传文件的ID即CID，如：logo.png [ID: 5a23ed4d205f044b7c67e9e6]</p>
                                </div>
                                <div class="form-group">
                                    <label>附件</label>
                                    <div th:include="/admin/_widgets/upload-box::upload-box"
                                         th:with="iFiles=${template?.files?.values()},id='UploadFiles',var=filesId,height=3"></div>
                                </div>
                            </fieldset>
                            <fieldset title="第二步">
                                <legend>选择条件</legend>
                                <div class="form-group">
                                    <label for="target">目标: </label>
                                    <select class="form-control" name="target" id="target">
                                        <option value="0">前台</option>
                                        <option value="1">后台</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>单位: </label>
                                    <div class="jstree-default i-jstree">
                                        <a class="jstree-anchor">
                                            <i class="jstree-icon jstree-themeicon"></i>全部
                                        </a>
                                    </div>
                                    <input type="hidden" id="department" name="department">
                                    <div id="js-department-tree"></div>
                                </div>
                                <div class="form-group">
                                    <label for="role">角色: </label>
                                    <select class="form-control" name="role" id="role">
                                        <option value="">全部</option>
                                    </select>
                                </div>
                            </fieldset>
                            <button class="stepy-finish btn btn-primary pull-right">完成</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->
    </section>
    <!-- /内容区域 -->
    <script>
        $(function () {

            // 完成提交
            $('#js-form').ajaxForm({
                dataType: 'json',
                beforeSubmit: function (arr, form, option) {
                    form.find("button:submit").attr('disable', true);
                    if (form.attr("isSubmit") === undefined) {//与stepy结合使用时，要避免二次提交的问题
                        form.attr("isSubmit", true);
                    } else {
                        form.removeAttr("isSubmit");
                        return false;
                    }
                },
                success: function (data, statusText, xhr, form) {
                    if (data.code === 200) {
                        form.resetForm(); // 重置表单
                        layer.msg(data.message, {icon: 1});
                        //回到第一个step
                        $(".stepy").stepy("step", 1);
                    } else {
                        layer.msg(data.message, {icon: 2});
                    }
                    form.find("button:submit").attr('disable', false);
                }
            });

            // 分步骤
            $(".stepy").stepy({
                backLabel: "上一步",
                nextLabel: "下一步",
                block: false,
                legend: false,
                select: function (step) {
                }, finish: function () {
                }
            });


            /**
             * 重置角色选项
             * @param department
             */
            function resetRoleOption(department) {
                $('#role').empty().append('<option value="">全部</option>');
                if (!!department) {
                    $.post('/admin/system/role/list', {department: department}, function (data) {
                        if (data.code === 200) {
                            $.each(data.data, function (i, row) {
                                $('#role').append('<option value="' + row.id + '">' + row.name + '</option>')
                            });
                        }
                    });
                }
            }


            var tree = {
                $el: $('#js-department-tree'),
                obj: null,
                init: function () {
                    var that = this;
                    this.obj = this.$el.jstree({
                        plugins: ['wholerow', 'json_data'],
                        core: {
                            dataType: 'json',
                            data: {
                                url: function (node) {
                                    return '/admin/system/department/tree/' + (node.id === '#' ? '' : node.id)
                                }
                            }
                        }
                    }).on("click.jstree", function (node) {
                        that.selectParentMenu();
                    });

                    $('.i-jstree').on('click', function () {
                        $('#department').val('');
                        resetRoleOption('');
                        $(this).css('background', '#BDE7FF');
                        $.jstree.reference("#js-department-tree").deselect_all();
                    });
                },
                selectParentMenu: function () { //选择父菜单
                    var tree = $.jstree.reference("#js-department-tree");
                    var node = tree.get_selected(true);
                    $('#department').val(!!node[0] ? node[0].id : '');
                    resetRoleOption(node[0].id);
                    $('.i-jstree').css('background', '');
                }
            };
            tree.init();
        });
    </script>
</div>
</body>
</html>